<template>
  <div class="main">
    <PureTableBar title="策略列表" class="list_hei">
      <template #buttons>
        <el-button type="primary" @click="createTaskVisible = true"> 制定审批策略 </el-button>
      </template>
      <template v-slot="{ size }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          :data="dataList" :columns="columns" :pagination="pagination" @current-change="handleCurrentChange"
          @size-change="handleSizeChange" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <el-button type='primary' text @click="checkDetail(row)">
              查看策略
            </el-button>
            <el-button type='primary' text @click="checkResultList(row)">
              查看审批结果
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>

    <ReDialog :width="1000" :height="500" :models="createTaskVisible" @Closes="createTaskVisible = false">
      <template #header>
        <h2 style="text-align: center;">制定自动策略</h2>
      </template>
      <template #main>
        <!-- 创建任务弹窗 -->
        <el-scrollbar height="420px">
          <el-form label-position="right" :close-on-click-modal="false" width="62%" center style="overflow:hidden"
            label-width="120px" :model="formData" ref="ruleFormRef" :rules="rule">
            <el-form-item label="策略名称" prop="strateName">
              <el-input v-model.trim="formData.strateName" class="!w-[50%]" />
            </el-form-item>
            <el-form-item label="产品类型" prop="productType">
              <el-select v-model="formData.productType" class="w-[50%]" @change="handleProductTypeChange()">
                <el-option v-for="type in productList" :key="type.value" :label="type.name
                  " :value="type.value" />
              </el-select>
            </el-form-item>
            <h2 style="text-align: left; margin-bottom: 30px;margin-top: 30px">通过条件</h2>
            <el-form-item label="信用评分模型">
              <el-select v-model="formData.passModel" class="w-[50%] ml-[20px]">
                <el-option v-for="type in indexData" :key="type.selectId" :label="type.selectName
                  " :value="type.selectId" />
              </el-select>
            </el-form-item>
            <el-form-item label="客户信用评分">
              >
              <el-input v-model.number="formData.passRating" class="!w-[50%] ml-[10px]" type="number" />
            </el-form-item>
            <el-form-item label="指数评分体系">
              <el-select v-model="formData.passRatingModel" class="w-[50%] ml-[20px]">
                <el-option v-for="type in userCreditData" :key="type.selectId" :label="type.selectName
                  " :value="type.selectId" />
              </el-select>
            </el-form-item>
            <el-form-item label="指数综合评分">
              >
              <el-input v-model="formData.passSynthesisRat" class="!w-[50%] ml-[10px]" type="number" />
            </el-form-item>
            <el-form-item label="指数综合评分">
              =
              <el-input v-model="formData.passSynthesisRat1" class="input-around" :min="-10" :max="10" type="number"
                @input="validateInput('passSynthesisRat1')" />
              履约能力指数 &nbsp;&nbsp;+
              <el-input v-model="formData.passSynthesisRat2" class="input-around" :min="-10" :max="10" type="number"
                @input="validateInput('passSynthesisRat2')" /> 消费能力指数 &nbsp;&nbsp;+
              <el-input v-model="formData.passSynthesisRat3" class="input-around" :min="-10" :max="10" type="number"
                @input="validateInput('passSynthesisRat3')" /> 资金需求指数 &nbsp;&nbsp;+
              <el-input v-model="formData.passSynthesisRat4" class="input-around" :min="-10" :max="10" type="number"
                @input="validateInput('passSynthesisRat4')" /> 个人稳定性指数 &nbsp;&nbsp;+
              <el-input v-model="formData.passSynthesisRat5" class="input-around" :min="-10" :max="10" type="number"
                @input="validateInput('passSynthesisRat5')" /> 恶意透支指数 &nbsp;&nbsp;+
              <el-input v-model="formData.passSynthesisRat6" class="input-around" :min="-10" :max="10" type="number"
                @input="validateInput('passSynthesisRat6')" /> 社交活跃性指数 &nbsp;&nbsp;+
              <el-input v-model="formData.passSynthesisRat7" class="input-around" :min="-10" :max="10" type="number"
                @input="validateInput('passSynthesisRat7')" /> 网购倾向指数 &nbsp;&nbsp;+
              <el-input v-model="formData.passSynthesisRat8" class="input-around" :min="-10" :max="10" type="number"
                @input="validateInput('passSynthesisRat8')" /> 游戏沉迷指数
            </el-form-item>
            <el-form-item label="贷款金额">
              {{ formData.passLoanAmount }}
            </el-form-item>
            <el-form-item label="贷款时长" prop="passLoanTime">
              <el-select v-model="formData.passLoanTime" class="!w-[50%]" @change="handleTimeChange(row)">
                <el-option v-for="type in loanDurationList" :key="type.selectName" :label="type.selectName
                  " :value="type.selectName" />
              </el-select>
            </el-form-item>
            <el-form-item label="贷款利率">
              {{ formData.passLoanRate }}
            </el-form-item>
            <el-form-item label="审批方式">
              自动审批
            </el-form-item>
            <h2 style="text-align: left; margin-left: 24px;margin-bottom: 30px;margin-top: 30px">不通过条件</h2>
            <el-form-item label="信用评分模型">
              <el-select v-model="formData.passModel" class="!w-[50%] ml-[20px]">
                <el-option v-for="type in indexData" :key="type.selectId" :label="type.selectName
                  " :value="type.selectId" />
              </el-select>
            </el-form-item>
            <el-form-item label="客户信用评分">
              ＜
              <el-input v-model="formData.noPassRating" class="!w-[50%] ml-[10px]" type="number" />
            </el-form-item>
            <el-form-item label="指数评分体系">
              <el-select v-model="formData.passRatingModel" class="!w-[50%] ml-[20px]">
                <el-option v-for="type in userCreditData" :key="type.selectId" :label="type.selectName
                  " :value="type.selectId" />
              </el-select>
              <div style="width: 100% ; margin-top: 10px;">
                <ScreenPerson v-if="createTaskVisible" />
              </div>
            </el-form-item>
            <el-form-item label="审批方式">
              自动审批
            </el-form-item>
            <h2 style="text-align: left; margin-left: 24px;margin-bottom: 30px;margin-top: 30px">人工审核条件</h2>
            <el-form-item label-width="30px">
              <el-checkbox v-model="formData.ischeck" size="large">上述条件外其他人员</el-checkbox>
            </el-form-item>
            <el-form-item label="审批方式">
              手动审批
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="saveNew(ruleFormRef)" :loading="BtnLoading" type="primary">保存</el-button>
          <el-button @click="createTaskVisible = false"> 取消 </el-button>
        </span>
      </template>
    </ReDialog>

    <ReDialog :width="800" :height="600" :models="resultVisible" @Closes="resultVisible = false">
      <template #header>
        <h2 style="text-align: center;">审批结果</h2>
      </template>
      <template #main>
        <!-- 审批结果弹窗 -->
        <PureTableBar title="策略结果列表" class="list_hei">
          <template v-slot="{ size, checkList }">
            <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading"
              size="small" :data="resultList" :columns="columns2" :checkList="checkList" :pagination="pagination2"
              @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }">
            </pure-table>
          </template>
        </PureTableBar>
      </template>
    </ReDialog>

    <!-- 查看详情弹窗 -->

    <ReDialog :width="1000" :height="600" :models="showTaskVisible" @Closes="showTaskVisible = false">
      <template #header>
        <h2 style="text-align: center;">制定自动策略</h2>
      </template>
      <template #main>
        <el-scrollbar height="500px">
          <el-form label-position="right" :close-on-click-modal="false" width="62%" center style="overflow:hidden"
            label-width="120px" :model="showData">
            <el-form-item label="策略名称" prop="strateName">
              {{ showData.strateName }}
            </el-form-item>
            <el-form-item label="产品类型" prop="productType">
              <el-select v-model="showData.productType" style="width: 70%" @change="handleProductTypeChange()" disabled>
                <el-option v-for="type in productList" :key="type.value" :label="type.name
                  " :value="type.value" />
              </el-select>
            </el-form-item>
            <h2 style="text-align: left; margin-left: 24px;margin-bottom: 30px;margin-top: 30px">通过条件</h2>
            <el-form-item label="信用评分模型">
              <el-select v-model="showData.passModel" style="width: 70%" disabled>
                <el-option v-for="type in indexData" :key="type.selectId" :label="type.selectName
                  " :value="type.selectId" />
              </el-select>
            </el-form-item>
            <el-form-item label="客户信用评分">
              >
              {{ showData.passRating }}
            </el-form-item>
            <el-form-item label="指数评分体系">
              <el-select v-model="showData.passRatingModel" style="width: 70%" disabled>
                <el-option v-for="type in userCreditData" :key="type.selectId" :label="type.selectName
                  " :value="type.selectId" />
              </el-select>
            </el-form-item>
            <el-form-item label="指数综合评分">
              >
              {{ showData.passSynthesisRat }}
            </el-form-item>
            <el-form-item label="指数综合评分">
              =
              <el-input v-model="showData.passSynthesisRat1" class="input-around" readonly />
              履约能力指数 &nbsp;&nbsp;+
              <el-input v-model="showData.passSynthesisRat2" class="input-around" readonly /> 消费能力指数 &nbsp;&nbsp;+
              <el-input v-model="showData.passSynthesisRat3" class="input-around" readonly /> 资金需求指数 &nbsp;&nbsp;+
              <el-input v-model="showData.passSynthesisRat4" class="input-around" readonly /> 个人稳定性指数 &nbsp;&nbsp;+
              <el-input v-model="showData.passSynthesisRat5" class="input-around" readonly /> 恶意透支指数 &nbsp;&nbsp;+
              <el-input v-model="showData.passSynthesisRat6" class="input-around" readonly /> 社交活跃性指数 &nbsp;&nbsp;+
              <el-input v-model="showData.passSynthesisRat7" class="input-around" readonly /> 网购倾向指数 &nbsp;&nbsp;+
              <el-input v-model="showData.passSynthesisRat8" class="input-around" readonly /> 游戏沉迷指数
            </el-form-item>
            <el-form-item label="贷款金额">
              >
              {{ showData.passLoanAmount }}
            </el-form-item>
            <el-form-item label="贷款时长" prop="passLoanTime">
              <el-select v-model="showData.passLoanTime" style="width: 70%" @change="handleTimeChange(row)" disabled>
                <el-option v-for="type in loanDurationList" :key="type.selectName" :label="type.selectName
                  " :value="type.selectName" />
              </el-select>
            </el-form-item>
            <el-form-item label="贷款利率">
              {{ showData.passLoanRate }}
            </el-form-item>
            <el-form-item label="审批方式">
              自动审批
            </el-form-item>
            <h2 style="text-align: left; margin-left: 24px;margin-bottom: 30px;margin-top: 30px">不通过条件</h2>
            <el-form-item label="信用评分模型">
              <el-select v-model="showData.passModel" style="width: 70%" disabled>
                <el-option v-for="type in indexData" :key="type.selectId" :label="type.selectName
                  " :value="type.selectId" />
              </el-select>
            </el-form-item>
            <el-form-item label="客户信用评分">
              ＜
              {{ showData.noPassRating }}
            </el-form-item>
            <el-form-item label="指数评分体系">
              <el-select v-model="showData.passRatingModel" style="width: 70%" disabled>
                <el-option v-for="type in userCreditData" :key="type.selectId" :label="type.selectName
                  " :value="type.selectId" />
              </el-select>
            </el-form-item>
            <div v-for="item in showData.noPassIndexScore">
              <div style="margin-left: 120px; text-align: start;font-size: 14px;">
                <span>{{ item.indexCode }}</span> &nbsp;&nbsp;
                <span>{{ item.operatorStr }}</span>&nbsp;&nbsp;
                <span>{{ item.indexScore }}</span>&nbsp;&nbsp;
              </div>
            </div>
            <el-form-item label="审批方式">
              自动审批
            </el-form-item>
            <h2 style="text-align: left; margin-left: 24px;margin-bottom: 30px;margin-top: 30px">人工审核条件</h2>
            <el-form-item label-width="30px">
              <el-form-item label-width="30px">
                <el-checkbox v-model="showData.ischeck" size="large">上述条件外其他人员</el-checkbox>
              </el-form-item>
            </el-form-item>
            <el-form-item label="审批方式">
              手动审批
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </template>
    </ReDialog>
  </div>
</template>
<script setup lang='ts'>
import { usePortrait } from "./hook/strategicBuild";
import { PureTableBar } from "@/components/RePureTableBar";
import ScreenPerson from "@/components/Screen-strate/index.vue"
import { ref } from "vue";
const ruleFormRef = ref();
const {
  columns,
  loading,
  dataList,
  pagination,
  createTaskVisible,
  formData,
  handleSizeChange,
  handleCurrentChange,
  rule,
  productList,
  loanAmountList,//贷款金额列表
  loanDurationList,//贷款期限列表
  handleProductTypeChange,
  indexData,
  userCreditData,
  handleTimeChange,
  saveNew,
  checkResultList,
  BtnLoading,
  resultList,
  pagination2,
  columns2,
  resultVisible,
  handleSizeChange1,
  handleCurrentChange1,
  showTaskVisible,
  showData,
  checkDetail,
  validateInput
} = usePortrait()
</script>

<style lang="scss" scoped>
@import url(@/style/CreditComm.scss);

:deep(.el-form-item__label) {
  font-weight: 700
}

.el-radio.el-radio--large .el-radio__label {
  font-size: 14px;
  font-weight: 700
}

.input-around {
  width: 8%;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 4px;
}
</style>
